<template>
  <h1 ref="title">{{ msg }}</h1>
  <h1>{{ data.a }}</h1>
  <button @click="changeMsg">changeMsg</button>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
let msg = ref(0)
let title = ref()
let data = reactive({
  a: 1,
  b: {
    c: 3
  }
}) 

function changeMsg() {
  msg.value += 1
  Object.assign(data, { a: 2 })
}

watch(() => data.a, () => {
  console.log('data.a', data.a)
})
watch(() => data.b, () => {
  console.log('data.a', data.a)
},{deep: true})
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
